laydateTab: 基于layui的laydate实现的日期时间选择组件选项卡，可以支持多个日期类型切换选择，且对于laydate的配置全部支持。

您所在的位置：网站首页 › layui 选项卡隐藏 › laydateTab: 基于layui的laydate实现的日期时间选择组件选项卡，可以支持多个日期类型切换选择，且对于laydate的配置全部支持。

laydateTab: 基于layui的laydate实现的日期时间选择组件选项卡，可以支持多个日期类型切换选择，且对于laydate的配置全部支持。

2024-07-04 17:47| 来源: 网络整理| 查看: 265

laydateTab 介绍

基于layui的laydate实现的日期时间选择组件选项卡，可以支持多个日期类型切换选择，且对于laydate的配置全部支持。查看例子展示

安装教程

依赖laydate，所以必须引用laydate! 插件目录一定为以下结构：

|-- extends |-- css |-- laydateTab.css |-- laydateTab.js 1. 使用layui模块化引入

项目目录结构假设为：

则引用方式为：

先加载layui相关的js、css 模块加载代码如下 layui.config({ base: 'js/layui/extends/' }).extend({ laydateTab: 'laydateTab' }).use(['laydateTab'], function(){ var laydateTab = layui.laydateTab; }); 2. 使用laydate单独引入

项目目录结构假设为：

则引用方式为：

使用说明获取laydateTab对象使用layui模块化引入，使用layui.laydateTab获取laydateTab对象。 layui.config({ base: 'js/layui/extends/' //假设这是你存放拓展模块的根目录 }).extend({ //设定laydateTab模块别名 laydateTab: 'laydateTab' }).use(['laydateTab'], function(){ var laydateTab = layui.laydateTab; laydateTab.render({ elem : '#indate' }); }); 使用laydate模块单独引入，使用laydateTab获取laydateTab对象。 laydateTab.render({ elem : '#indate' }); 具体例子参考 examples 文件夹里面。最简单的绑定配置 laydateTab.render({ elem : '#indate' // 绑定触发元素 });

比较复杂的绑定配置

laydateTab.render({ elem : '#indate', // 绑定触发元素 type : ['year', 'month'], //显示的类型选项卡 title : ['年份', '月份'], // 日期选择选项卡显示的标题名称 range : '~', // 开启范围，使用Array则对类型区分使用该参数 selected : 'month', // 初始化默认显示的选项卡 theme : '#393D49', //主题 // 渲染成功之后回调 success : function(tabElem, options) { console.log(tabElem); // 日期选项卡对应的标签元素 console.log(options); // 渲染的参数 }, // 切换选项卡的回调 changeTab : function(type, title) { console.log(type); // 当前选择的类型 console.log(title); // 当前选择的类型标题名称 }, // 选择完毕的回调, 可参考laydate done回调 done : function(value, date, endDate) { console.log(value); // 生成的值(选择后的值) console.log(date); // 日期时间对象 console.log(date); //结束的日期时间对象 layer.msg('当前选择的值为: ' + value); }, // 销毁选项卡之后的回调 end : function(elem) { console.log(elem); // 所绑定的触发元素 - elem对象 } }); laydateTab特有的相关配置参数类型说明示例值 elem String/DOM 指定laydateTab的触发的元素，必填 '#demo' trigger String 触发显示laydateTab的事件，默认值：click 'mouseover' type Array / String 需要渲染的选项卡类型。1. 默认值: ['year', 'month', 'date'] 2. 选项卡类型值： year : 年 month : 月 date : 日期 time : 时间 datetime : 日期时间 3. 内置String快捷类型： yms : 年、月、日期3个选项卡 ym : 年、月2个选项卡 md : 月、日期2个选项卡all : 年、月、日期、时间、日期时间全部5个选项卡 'yms' [year', 'month', 'date'] title Array [选填]日期选择选项卡显示的标题名称，如果填写，则使用数组写出和type对应的选项卡标题名称，如果数组中某个值为null，则使用内置默认值。默认值如下：year: 年month: 月date: 日期datetime: 日期时间time: 时间 ['年份', '月份', '日期'] value Array / String 日期默认值,使用数组则需要和type一一对应。 '2020-12-01' selected String 初始化默认显示的选项卡。 'date' theme String 主题；theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题） '#393D49' locationValueTab Boolean 有初始值情况下，是否定位到初始值对应的选项卡类型,默认true，false不进行定位 false success Function 渲染显示成功之后的回调，返回2个参数，分别为日期选项卡对应的标签元素、渲染配置 function(tabElem, options) { console.log(tabElem);console.log(options);} changeTab Function 切换选项卡的回调，返回1个参数-选项卡对应的类型、类型标题名称 function(type, title) { console.log(type); console.log(title);} done Array / Function 选择完毕的回调,如果是数组，则数组存放的也需要为function，可参考laydate done回调;回调参数带有3个参数分别代表：生成的值、日期时间对象、结束的日期时间对象；如果return String类型的值回去，则将return的值给elem赋值 function(value, date, endDate){console.log(value);console.log(date);console.log(endDate);} end Function 销毁选项卡之后的回调，返回1个参数-所绑定的elem对象 function(elem) { console.log(elem);}

tips : position参数不可使用

其他相关配置

其他配置参考laydate配置, 选项卡全通用则使用单个值，区分选项卡则使用数组。

参与贡献 Fork 本仓库新建 Feat_xxx 分支提交代码新建 Pull Request

【本文地址】

laydateTab: 基于layui的laydate实现的日期时间选择组件选项卡，可以支持多个日期类型切换选择，且对于laydate的配置全部支持。

laydateTab: 基于layui的laydate实现的日期时间选择组件选项卡，可以支持多个日期类型切换选择，且对于laydate的配置全部支持。

今日新闻

推荐新闻